<template>
  <div class="vc-calendar">
    <div class="vc-calendar-header">
      <slot name="header"> </slot>
    </div>
    <div class="vc-calendar-body">
      <div class="vc-calendar-body__header">
        <table>
          <thead>
            <tr>
              <th v-for="(item, index) in props.columns" :key="index">{{ item }}</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="vc-calendar-body__month">
        <table>
          <colgroup>
            <col v-for="item in props.columns.length" :key="item" />
          </colgroup>
          <tbody>
            <tr v-for="(item, index) in formData.list" :key="index">
              <td v-for="v in item" :key="v" :title="v.date">
                <div
                  @click="props.hasClick && handleClickDay(v)"
                  class="vc-picker-cell"
                  :class="{
                    'vc-pointer': props.hasClick,
                    'vc-notmonth': !handle.isCurrentMonth(v.value),
                    'vc-picker-active':
                      props.mode !== 'single' ? v.clickDay : v.value === selectValue,
                    'vc-picker-today': handle.isCurrentDay(v.value),
                  }"
                >
                  <div class="vc-day">
                    <slot name="day" :data="v"> </slot>
                  </div>
                  <div class="vc-schedule">
                    <slot name="schedule" :data="v"></slot>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'month',
  };
</script>

<script setup>
  import handleCalendar from './handle.js';
  const formData = ref({});
  const handle = handleCalendar('month', props.mode);
  const props = defineProps({
    hasClick: {
      type: Boolean,
      default: true,
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    mode: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['handleClick', 'setTitle']);
  // 上一月
  const handlePrev = () => {
    const { detail, emitName } = handle.handlePrev();
    formData.value = detail;
    getTitle();
    emit('handleClick', detail, emitName);
  };
  // 下一月
  const handleNext = () => {
    const { detail, emitName } = handle.handleNext();
    formData.value = detail;
    getTitle();
    emit('handleClick', detail, emitName);
  };
  // 点击回到今天
  const handleToday = () => {
    const { detail, emitName } = handle.handleToday();
    formData.value = detail;
    getTitle();
    emit('handleClick', detail, emitName);
  };
  const selectValue = ref();
  // 点击某一天
  const handleClickDay = (item) => {
    if (props.mode === 'single') {
      selectValue.value = item.value;
    }
    const { detail, emitName } = handle.handleClickDay(item);
    formData.value = detail;
    emit('handleClick', detail, emitName);
  };
  const getTitle = () => {
    const list = toRaw(formData.value.list);
    const date = list?.find((v) => v.day === '01');
    let title = date.year + '年' + date.month + '月';
    emit('setTitle', title);
  };
  onMounted(() => {
    handleToday();
  });
  watchEffect(() => {
    formData.value.list = props.dataSource.length ? props.dataSource : formData.value?.list;
    formData.value.list = handle.filter(formData.value.list, props.columns.length);
  });
  defineExpose({
    handlePrev,
    handleNext,
    handleToday,
    handleClickDay,
  });
</script>

<style lang="less" scoped>
  @import './style.less';
</style>
